:root {
      --accent-red: #ff3b3b;
      --light-bg: #f8f9fa;
      --glass-white: rgba(255, 255, 255, 0.7);
      --text-main: #1d1d1f;
      --text-dim: #86868b;
    }

    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

    .certificate-verify-viewport.light-theme {
      width: 100%;
      min-height: 100vh;
      background: radial-gradient(circle at top right, #ffffff, #f0f0f0);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      box-sizing: border-box;
    }

    .certificate-glass-container {
      width: 100%;
      max-width: 440px;
      background: var(--glass-white);
      backdrop-filter: blur(30px) saturate(180%);
      -webkit-backdrop-filter: blur(30px) saturate(180%);
      border: 1px solid rgba(255, 255, 255, 0.4);
      border-radius: 32px;
      padding: 40px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.04);
      transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .certificate-top-notif { margin-bottom: 20px; }
    .certificate-secure-tag {
      display: inline-flex;
      background: rgba(255, 59, 59, 0.08);
      color: var(--accent-red);
      padding: 6px 14px;
      border-radius: 100px;
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    .certificate-main-title {
      font-size: 2rem;
      color: var(--text-main);
      font-weight: 800;
      margin: 0 0 10px;
    }
    .red-text { color: var(--accent-red); }
    .certificate-desc { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 30px; line-height: 1.5; }

    /* Input Styling */
    .certificate-input-wrapper {
      position: relative;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 16px;
      padding: 12px 20px;
      border: 1px solid transparent;
      margin-bottom: 20px;
    }
    .certificate-input-field {
      width: 100%;
      border: none;
      background: transparent;
      padding: 15px 0 5px;
      font-size: 1rem;
      font-weight: 600;
      outline: none;
    }
    .certificate-label {
      position: absolute;
      left: 20px;
      top: 22px;
      color: var(--text-dim);
      transition: 0.3s;
      pointer-events: none;
    }
    .certificate-input-field:focus ~ .certificate-label,
    .certificate-input-field:not(:placeholder-shown) ~ .certificate-label {
      transform: translateY(-15px) scale(0.8);
      color: var(--accent-red);
    }

    .certificate-btn-submit {
      width: 100%;
      height: 60px;
      background: var(--text-main);
      color: #fff;
      border: none;
      border-radius: 18px;
      font-weight: 700;
      cursor: pointer;
      transition: 0.3s;
    }
    .certificate-btn-submit:hover { background: var(--accent-red); transform: translateY(-2px); }

    /* Results section inside card */
    .certificate-result { margin-bottom: 25px; animation: slideDown 0.4s ease-out; }
    @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

    .certificate-result-box { border-radius: 20px; padding: 15px; margin-bottom: 15px; }
    .certificate-result-valid { background: rgba(34, 197, 94, 0.05); border: 1px solid rgba(34, 197, 94, 0.2); }
    .certificate-result-invalid { background: rgba(255, 59, 59, 0.05); border: 1px solid rgba(255, 59, 59, 0.2); }

    .certificate-info-list { display: grid; gap: 8px; margin-top: 15px; }
    .certificate-info-item {
      display: flex;
      justify-content: space-between;
      background: rgba(0,0,0,0.02);
      padding: 10px 15px;
      border-radius: 12px;
      font-size: 0.85rem;
    }
    .certificate-status-badge { color: #16a34a; font-weight: 800; }

    [hidden] { display: none !important; }